<template>
  <view class="grid-container">
    <h3>基本用法</h3>
    <view class="grid">
      <a-row class="grid-demo">
        <a-col :span="24">
          <view>24-100%</view>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="12">
          <view>12-50%</view>
        </a-col>
        <a-col :span="12">
          <view>12-50%</view>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="8">
          <view>8-33.33%</view>
        </a-col>
        <a-col :span="8">
          <view>8-33.33%</view>
        </a-col>
        <a-col :span="8">
          <view>8-33.33%</view>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="6">
          <view>6-25%</view>
        </a-col>
        <a-col :span="6">
          <view>6-25%</view>
        </a-col>
        <a-col :span="6">
          <view>6-25%</view>
        </a-col>
        <a-col :span="6">
          <view>6-25%</view>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="4">
          <view>4-16.66%</view>
        </a-col>
        <a-col :span="4">
          <view>4-16.66%</view>
        </a-col>
        <a-col :span="4">
          <view>4-16.66%</view>
        </a-col>
        <a-col :span="4">
          <view>4-16.66%</view>
        </a-col>
        <a-col :span="4">
          <view>4-16.66%</view>
        </a-col>
        <a-col :span="4">
          <view>4-16.66%</view>
        </a-col>
      </a-row>
    </view>
    <h3>栅格偏移</h3>
    <view class="grid gridOffset">
      <a-row>
        <a-col :span="8">col-8</a-col>
        <a-col :span="8" :offset="8"> col-8|offset-8 </a-col>
      </a-row>
      <a-row>
        <a-col :span="6" :offset="8"> col-6 | offset-8 </a-col>
        <a-col :span="6" :offset="4"> col-6 | offset-4 </a-col>
      </a-row>
      <a-row>
        <a-col :span="12" :offset="8"> col-12 | offset-8 </a-col>
      </a-row>
    </view>

    <h3>区块间隔</h3>
    <view class="gridGutter">
      <p>Horizontal</p>
      <a-row :gutter="24">
        <a-col :span="12">
          <view>col-12</view>
        </a-col>
        <a-col :span="12">
          <view>col-12</view>
        </a-col>
      </a-row>
      <p>Responsive</p>
      <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <view>col-6</view>
        </a-col>
        <a-col :span="6">
          <view>col-6</view>
        </a-col>
        <a-col :span="6">
          <view>col-6</view>
        </a-col>
        <a-col :span="6">
          <view>col-6</view>
        </a-col>
      </a-row>
      <p>Horizontal and Vertical</p>
      <a-row :gutter="[24, 12]">
        <a-col :span="6">
          <view>col-6</view>
        </a-col>
        <a-col :span="6">
          <view>col-6</view>
        </a-col>
        <a-col :span="6">
          <view>col-6</view>
        </a-col>
        <a-col :span="6">
          <view>col-6</view>
        </a-col>
        <a-col :span="6">
          <view>col-6</view>
        </a-col>
        <a-col :span="6">
          <view>col-6</view>
        </a-col>
        <a-col :span="6">
          <view>col-6</view>
        </a-col>
        <a-col :span="6">
          <view>col-6</view>
        </a-col>
      </a-row>
    </view>
    <h3>Flex 用法</h3>
    <view class="gridFlex">
      <a-row class="grid-demo" style="margin-bottom: 16px">
        <a-col flex="100px">
          <view>100px</view>
        </a-col>
        <a-col flex="auto">
          <view>auto</view>
        </a-col>
      </a-row>
      <a-row class="grid-demo" style="margin-bottom: 16px">
        <a-col flex="100px">
          <view>100px</view>
        </a-col>
        <a-col flex="auto">
          <view>auto</view>
        </a-col>
        <a-col flex="100px">
          <view>100px</view>
        </a-col>
      </a-row>
      <a-row class="grid-demo" style="margin-bottom: 16px">
        <a-col :flex="3">
          <view>3 / 12</view>
        </a-col>
        <a-col :flex="4">
          <view>4 / 12</view>
        </a-col>
        <a-col :flex="5">
          <view>5 / 12</view>
        </a-col>
      </a-row>
    </view>

    <h3>排序</h3>
    <view class="gridOrder">
      <a-row>
        <a-col :span="6" :order="4">
          <div>1 col-order-4</div>
        </a-col>
        <a-col :span="6" :order="3">
          <div>2 col-order-3</div>
        </a-col>
        <a-col :span="6" :order="2">
          <div>3 col-order-2</div>
        </a-col>
        <a-col :span="6" :order="1">
          <div>4 col-order-1</div>
        </a-col>
      </a-row>
    </view>
  </view>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.grid-container {
  padding: 24rpx;
}

.grid {
  width: 100%;

  :deep(.arco-row) .arco-col {
    height: 48px;
    line-height: 48px;
    color: $color-white;
    text-align: center;
    font-size: 24rpx;
  }

  :deep(.arco-row) .arco-col:nth-child(2n) {
    background-color: $arcoblue-6;
  }

  :deep(.arco-row) .arco-col:nth-child(2n + 1) {
    background-color: $color-primary-light-4;
  }
}

.gridOffset {
  :deep(.arco-row) {
    margin-bottom: 16px;
    background-color: $color-fill-2;
  }
}

.gridFlex {
  width: 100%;
  :deep(.arco-row) .arco-col {
    height: 60rpx;
    line-height: 60rpx;
    color: $color-white;
    text-align: center;
    font-size: 24rpx;
  }

  :deep(.arco-row) .arco-col:nth-child(2n) {
    background-color: $arcoblue-6;
  }

  :deep(.arco-row) .arco-col:nth-child(2n + 1) {
    background-color: $color-primary-light-4;
  }
}

.gridOrder {
  width: 100%;
  :deep(.arco-row) .arco-col {
    height: 60rpx;
    line-height: 60rpx;
    color: $color-white;
    text-align: center;
    font-size: 24rpx;
  }
  :deep(.arco-row) .arco-col:nth-child(2n) {
    background-color: $arcoblue-6;
  }
  :deep(.arco-row) .arco-col:nth-child(2n + 1) {
    background-color: $color-primary-light-4;
  }
}

.gridGutter {
  .arco-row .arco-col > view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60rpx;
    font-size: 24rpx;
  }

  .arco-row .arco-col:nth-child(2n) > view {
    background-color: $arcoblue-6;
  }

  .arco-row .arco-col:nth-child(2n + 1) > view {
    background-color: $color-primary-light-4;
  }
}
</style>
